<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            /*去除小圆点*/
            list-style-type: none;
        }

        ul > li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid black;
            background-color: #ccc;
            float: left;
            margin-right: 10px;
        }

        ul > li:hover {
            background-color: #eee;
        }

        .bgc {
            background-color: #ff6700;
        }

    </style>
</head>
<body>
<!--
   案例1:   全选和取消全选
   案例2：  轮播图分页器样式操作
   案例3:   随机点名小程序
-->
<p><input type="checkbox" class="parent"></p>
<hr>
<input type="checkbox" class="box">
<input type="checkbox" class="box">
<input type="checkbox" class="box">
<input type="checkbox" class="box">
<script>
    //  获取父节点 复选框
    let parentBox = document.getElementsByClassName('parent')[0]
    let boxs = document.getElementsByClassName('box')
    parentBox.onclick = function () {
        if (this.checked) {
            for (let i = 0; i < boxs.length; i++) {
                boxs[i].checked = true
            }
        } else {
            for (let i = 0; i < boxs.length; i++) {
                boxs[i].checked = false
            }
        }
    }

    //  子节点box绑定单击事件
    for (let i = 0; i < boxs.length; i++) {
        boxs[i].onclick = function () {
            //判定子节点是否被全部选中
            let allChecked = true
            for (let j = 0; j < boxs.length; j++) {
                if (!boxs[j].checked) {
                    allChecked = false
                    break
                }
            }

            if (allChecked) {
                parentBox.checked = true
            } else {
                parentBox.checked = false
            }

        }
    }


</script>


<hr>
<h2>小米轮播图分页器样式操作</h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<script>
    const lis = document.querySelectorAll('li')
    lis.forEach(li => {
        li.onclick = function () {
            //  排它  去除其它分页器的背景色
            lis.forEach(li => {
                li.classList.remove('bgc')
            })
            // 添加当前分页器背景色
            this.classList.add('bgc')
        }
    })

</script>

</body>
</html>
